import React, { FC, useMemo } from 'react';
import { Popconfirm } from 'choerodon-ui';
import { Table, Button, DataSet } from 'choerodon-ui/pro';
import { ColumnProps } from 'choerodon-ui/pro/lib/table/Column';
import { RenderProps } from 'choerodon-ui/pro/lib/field/FormField';
import { ButtonColor } from 'choerodon-ui/pro/lib/button/enum';
import Record from 'choerodon-ui/pro/lib/data-set/Record';
import styles from './Users.css';
import UserModal from './UserModal';
import getTableDSProps from '../dataSet/tableDataSet';
import getFormDSProps from '../dataSet/formDataSet';

const Users: FC<any> = () => {
  const dataSet = useMemo(() => new DataSet(getTableDSProps()), []);
  const formDS = useMemo(() => new DataSet(getFormDSProps()), []);

  const columns: ColumnProps[] = [
    {
      name: 'name',
      renderer: ({text}: RenderProps) => <a href="">{text}</a>,
    },
    { name: 'email' },
    { name: 'website' },
    {
      header: '操作',
      renderer: ({record}: RenderProps) => (
        <span className={styles.operation}>
          <UserModal dataSet={formDS} record={record as Record} onOk={handleOK}>
            <a>Edit</a>
          </UserModal>
          <Popconfirm title="Confirm to delete?" onConfirm={() => dataSet.delete(record as Record)}>
            <a href="">Delete</a>
          </Popconfirm>
        </span>
      ),
    },
  ];

  /**
  * 编辑Modal点击ok，重新查询表格数据
  */
  const handleOK = () => {
    dataSet.query();
  };
  return (
    <div className={styles.normal}>
      <div>
        <div className={styles.create}>
          <UserModal dataSet={formDS} record={{} as Record} onOk={handleOK}>
            <Button color={ButtonColor.primary}>Create User</Button>
          </UserModal>
        </div>
        <Table
          dataSet={dataSet}
          columns={columns}
        />
      </div>
    </div>
  );
};

export default Users;
